<!-- 合同弹出层 -->
<template>
	<div class="tt">
    <el-dialog
		v-model="state.dialogVisible"
    :show-close="false"
    :align-center="true"
		width="15%"
		:before-close="handleClose"
	>

  <div class="content">
    <div class="icon_">
					<svg-icon  icon-class="project-detail-icon-success" class="icon" />
    </div>
    <div class="prompt">{{prompt}}</div>
  </div>
	</el-dialog>
  </div>
</template>

<script setup>
import { ElDialog } from "element-plus";
import {reactive} from 'vue';
const props = defineProps({
  prompt: {
    type: String,
  },
  time: {
    type: String,
    default:'1000'
  }
})
const state = reactive({
  dialogVisible : false
  
})


// 开启弹窗
const open = () => {
  state.dialogVisible = true;
  setTimeout(() => {
    state.dialogVisible = false;
  },props.time)
};

const handleClose = () => {
  state.dialogVisible = false;
}

defineExpose({ open });
</script>

<style lang="scss" scoped>
.icon_ {
  margin: 36px auto 10px;
  // transform: translate(-50%,-50%);
  width: 50px;
  height: 50px;
  .icon {
    width: 100%;
    height: 100%;
  }
 
}
.content {
  // width: 400px;
  height: 130px;
  position: relative;
  background-color: #fff;

  .prompt {
    text-align: center;
font-size: 16px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 700;
color: #1A1A1A;
  }
}
.tt {
  :deep(.el-dialog__header) {
    padding:  0 !important;
    height: 0;
  }
  :deep(.el-overlay .el-dialog__body) {
    padding:  0;
  }
}

</style>
